<template>
 <div>
     <el-carousel height='500px' :interval="2000" arrow="always">
            <el-carousel-item v-for="item in imgList" :key="item">
            <el-image :src="item" @load="imgHasLoad"></el-image>
            </el-carousel-item>
    </el-carousel>
 </div>
</template>

<script>

 export default {
    name:'DetailSwiper',
    data () {
        return {
                counter:0,
                imgLength:0
        };
    },
    props: {
        imgList:{
            type:Array,
            default(){
                return [];
            }
        }
    },
  components: {},
  watch: {
      'imgList':function(val){ 
        this.imgLength=val.length
      }
  },
  methods: {
      imgHasLoad(){
          if(++this.counter===this.imgLength){
            //   console.log("goodsinfo imgLoad");
            //   this.$emit('imgHasLoad')
          }
      }
  }

  

 }

</script>
<style scoped>

</style>